<template>
  <div class="applicationData">
    <div class="applicationNumContainer">
      <div class="title">
        应用数量：<span class="num">{{ applicationData.num }}</span
        ><span class="unit">个</span>
      </div>
      <div class="applicationNum" id="applicationNum"></div>
    </div>
    <div class="basicLibrary">
      <div class="leftContainer">
        <div class="storageCapacity">
          <div class="ring">
            <div class="num">{{ applicationData.structured }}T</div>
          </div>
          <div class="title">结构化数据存储量</div>
        </div>
        <div class="storageCapacity">
          <div class="ring">
            <div class="num">400T</div>
          </div>
          <div class="title">非结构化数据存储量</div>
        </div>
      </div>
      <div class="rightContainer">
        <div class="topContainer">
          <div class="topContext">
            <div class="tableTitle">
              <img src="../../img/basicLibrary.png" height="17px" alt="" srcset="" />
              <div class="numContext">
                <div>
                  表数量：<span class="num">{{ applicationData.basicLibrary.record }}</span
                  ><span class="unit">个</span>
                </div>
              </div>
              <div class="numContext">
                <div>
                  数据项数：<span class="num">{{ applicationData.basicLibrary.dataItem }}</span
                  ><span class="unit">个</span>
                </div>
              </div>
              <div class="numContext">
                <div>
                  数据条数：<span class="num">{{ applicationData.basicLibrary.tableNum }} </span><span class="unit">个</span>
                </div>
              </div>
            </div>
            <div class="enterpriseContainer">
              <div class="itemContainer">
                <img src="../../img/enterpriseLibrary.png" alt="" srcset="" />
                <div class="itemContent">
                  <div class="item">
                    <div>企业类别数</div>
                    <div class="num">{{ (applicationData.basicLibrary.enterprise.typeNum = 12) }}</div>
                  </div>
                  <div class="item cursor" @click="formData('企业数')">
                    <div>企业数</div>
                    <div class="num">{{ applicationData.basicLibrary.enterprise.num + 1000 }}</div>
                  </div>
                  <div class="item">
                    <div>企业资质数</div>
                    <div class="num">{{ applicationData.basicLibrary.enterprise.qualificationsNum + 500 }}</div>
                  </div>
                </div>
              </div>
              <div class="itemContainer">
                <img src="../../img/personnelDatabase.png" alt="" srcset="" />
                <div class="itemContent">
                  <div class="item">
                    <div>人员类别数</div>
                    <div class="num">{{ (applicationData.basicLibrary.people.typeNum = 24) }}</div>
                  </div>
                  <div class="item">
                    <div>人员数</div>
                    <div class="num">{{ applicationData.basicLibrary.people.num + 12000 }}</div>
                  </div>
                  <div class="item">
                    <div>注册人员数</div>
                    <div class="num">{{ applicationData.basicLibrary.people.registerNum }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="splitLine"></div>
            <div class="projectContainer">
              <div class="projectContext">
                <img src="../../img/projectLibrary.png" alt="" srcset="" />
                <div class="itemContent">
                  <div class="item">
                    <div>项目总数</div>
                    <div class="num">{{ applicationData.basicLibrary.project.toolNum + 2000 }}</div>
                  </div>
                  <div class="item">
                    <div>在建项目数</div>
                    <div class="num">{{ applicationData.basicLibrary.project.projectsOngoingNum + 1800 }}</div>
                  </div>
                  <div class="item">
                    <div>在建建筑单体数</div>
                    <div class="num">{{ applicationData.basicLibrary.project.buildingsUnderConstruction + 6000 }}</div>
                  </div>
                  <div class="item">
                    <div>各阶段项目数</div>
                    <div class="num">{{ applicationData.basicLibrary.project.projectsInEachStage }}</div>
                  </div>
                </div>
              </div>
              <div class="houseStorage">
                <img src="../../img/houseStorage.png" alt="" srcset="" />
                <div class="itemContent">
                  <div class="item">
                    <div>房屋类别数</div>
                    <div class="num">468</div>
                  </div>
                  <div class="item">
                    <div>房屋栋数</div>
                    <div class="num">748</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="buttonContainer">
          <div class="buttonContext">
            <div class="tableTitle">
              <img src="../../img/topicLibrary.png" height="17px" alt="" srcset="" />
              <div class="numContext">
                <div>
                  数据资源：<span class="num">{{ (applicationData.topicLibrary.dataResources = 396) }}</span
                  ><span class="unit">个</span>
                </div>
              </div>
              <div class="numContext">
                <div>
                  教据项：<span class="num">{{ (applicationData.topicLibrary.more.dataResources = 31370) }}</span
                  ><span class="unit">个</span>
                </div>
              </div>
              <div class="numContext">
                <div>
                  记录：<span class="num">{{ (applicationData.topicLibrary.record = 8185548) }}</span
                  ><span class="unit">个</span>
                </div>
              </div>
            </div>
            <div class="topicLibrary">
              <div class="topicItem">
                <div class="topicItemContext">
                  <div class="topicTitle">
                    <!-- 勘察设计库：<span class="num">{{ applicationData.topicLibrary.designLibrary.num }}</span><span class="unit">个</span> -->
                  </div>
                  <div class="topicContext">
                    <div class="item">
                      <div class="name">数据资源</div>
                      <div class="num">{{ (applicationData.topicLibrary.designLibrary.record = 139) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">数据项</div>
                      <div class="num">{{ (applicationData.topicLibrary.designLibrary.dataItem = 2181) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">记录</div>
                      <div class="num">{{ (applicationData.topicLibrary.designLibrary.dataResources = 288990) }}</div>
                    </div>
                  </div>
                </div>
                <div class="splitLine"></div>
              </div>
              <div class="topicItem">
                <div class="topicItemContext">
                  <div class="topicTitle">
                    <!-- 工程质量安全：<span class="num">{{ applicationData.topicLibrary.projectQuality.num }}</span><span class="unit">个</span> -->
                  </div>
                  <div class="topicContext">
                    <div class="item">
                      <div class="name">数据资源</div>
                      <div class="num">{{ (applicationData.topicLibrary.projectQuality.record = 120) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">数据项</div>
                      <div class="num">{{ (applicationData.topicLibrary.projectQuality.dataItem = 2516) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">记录</div>
                      <div class="num">{{ (applicationData.topicLibrary.projectQuality.dataResources = 964620) }}</div>
                    </div>
                  </div>
                </div>
                <div class="splitLine"></div>
              </div>
              <div class="topicItem">
                <div class="topicItemContext">
                  <!-- <div class="topicTitle">更多：<span class="num">{{ applicationData.topicLibrary.more.num }}</span><span class="unit">个</span></div> -->
                  <div class="topicContext">
                    <div class="item">
                      <div class="name">数据资源</div>
                      <div class="num">{{ (applicationData.topicLibrary.more.record = 1007) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">数据项</div>
                      <div class="num">{{ (applicationData.topicLibrary.more.dataResources = 26673) }}</div>
                    </div>
                    <div class="item">
                      <div class="name">记录</div>
                      <div class="num">{{ (applicationData.topicLibrary.more.dataItem = 7406516) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Dialog :visible="bslwsVisible" dataChange="4" @close="bslwsVisible = false" :title="name">
      <Table
        :currentPage="tableOptions.currentPage"
        :pageSize="tableOptions.pageSize"
        :columns="tableOptions.columns"
        :total="tableOptions.total"
        :tableData="tableOptions.tableData"
        @pageSizeChange="pageSizeChange"
        @currentChange="currentChange"
        @queryTableData="queryTableData"
      />
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Dialog from "../Dialog2.vue";
import Table from "@/components/tables/Table.vue";
import * as echarts from "echarts";
import {
  getStructuredDataStorage,
  GETdigitalAssetsJcksjxCount,
  GETdigitalAssetsJcksjtCount,
  GETdigitalAssetsJckbCount,
  GETdigitalAssetsJckqykqylbCount,
  GETdigitalAssetsJckqykqyzzCount,
  GETdigitalAssetsJckqykqyCount,
  GETdigitalAssetsZtksjtCount,
  GETdigitalAssetsZtkkcsjksjxCount,
  GETdigitalAssetsZtkkcsjksjtCount,
  GETdigitalAssetsZtkkcsjkbCount,
  GETdigitalAssetsZtkgdsjxCount,
  GETdigitalAssetsZtkgdsjtCount,
  GETdigitalAssetsZtkgdbCount,
  GETdigitalAssetsZtkgczlaqksjxCount,
  GETdigitalAssetsZtkgczlaqksjtCount,
  GETdigitalAssetsZtkgczlaqkbCount,
  GETdigitalAssetsZtksjxCount,
  GETdigitalAssetsZtkbCount,
  GETdigitalAssetsJckrykryCount,
  GETdigitalAssetsJckrykrylbCount,
  GETdigitalAssetsJckrykzcryCount,
  GETdigitalAssetsJckxmkzjxmdtCount,
  GETdigitalAssetsJckxmkzjxmCount,
  GETdigitalAssetsJckxmkxmzCount,
  GETdigitalAssetsJckxmkgjdxmCount,
  GETdigitalAssetsJckfwkfwlbCount,
  GETdigitalAssetsJckfwkfwdCount,
  getJckqykqyCountMx,
  GETdataResourceCount
} from "@/api/Digitalassets.js";
const bslwsVisible = ref(false);
const name = ref("");

const tableOptions = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  columns: [
    {
      prop: "serial",
      label: "连续",
    },
    {
      prop: "enterprise_name",
      label: "企业名称",
    },
    {
      prop: "uni_cred_code",
      label: "信用代码",
    },
    {
      prop: "etl_sjlx",
      label: "数据流向",
    },
    {
      prop: "bus_addr",
      label: "地址",
    },
  ],
  tableData: [],
});

const formData = (val) => {
  bslwsVisible.value = true;
  name.value = val;
  getTableData(1, 10);
};

const pageSizeChange = (val) => {
  console.log(111111);
};

const currentChange = (val) => {
  tableOptions.value.currentPage = val;
  getTableData(val, tableOptions.value.pageSize);
};

const queryTableData = (val) => {
  // TODO: 模糊查询，接口未做
  tableOptions.value.currentPage = 1;
  getTableData(1, tableOptions.value.pageSize);
};

const getTableData = async (current, pageSize) => {
  const {
    data: { data: tableData, total },
  } = await getJckqykqyCountMx({
    pageNumber: current,
    pageSize,
  });
  console.log(111111111111111, tableData);
  tableOptions.value.tableData = tableData;
  tableOptions.value.total = total;
};

const applicationData = ref({
  num: 86754,
  structured: 50,
  eChartsData: {
    xAxis: ["设计处", "建管处", "质安处", "排水处", "市场处", "物业处", "征收处"],
    seriesData: {
      oldApp: [40, 38, 52, 34, 44, 63, 29],
      newApp: [29, 63, 44, 34, 52, 38, 40],
    },
  },
  basicLibrary: {
    tableNum: 333634,
    dataItem: 8645,
    record: 754,
    enterprise: {
      typeNum: 54,
      num: 734,
      qualificationsNum: 864,
    },
    people: {
      typeNum: 54,
      num: 734,
      registerNum: 7864,
    },
    project: {
      toolNum: 357,
      projectsOngoingNum: 468,
      buildingsUnderConstruction: 748,
      projectsInEachStage: 362,
    },
    house: {
      typeNum: 468,
      toolNum: 748,
    },
  },
  topicLibrary: {
    dataResources: 323634,
    dataItem: 8645,
    record: 754,
    designLibrary: {
      num: 357,
      dataResources: 54,
      dataItem: 734,
      record: 754,
    },
    projectQuality: {
      num: 357,
      dataResources: 54,
      dataItem: 734,
      record: 754,
    },
    more: {
      num: 357,
      dataResources: 54,
      dataItem: 734,
      record: 754,
    },
  },
});

const initApplication = () => {
  const chartDom = document.getElementById("applicationNum");
  const myChart = echarts.init(chartDom);

  myChart.setOption({
    title: {
      text: "单位：个",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: 0,
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "20%",
      bottom: "20%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: [
      {
        type: "category",
        data: applicationData.value.eChartsData.xAxis,
        axisLabel: {
          interval: 0,
          rotate: -45,
          color: "#fff",
          fontSize: 10,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    series: [
      {
        name: "既有应用",
        type: "bar",
        stack: "Ad",
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#30D3EF",
              },
              {
                offset: 1,
                color: "#3178EF",
              },
            ]),
            borderRadius: [9, 9, 0, 0],
          },
        },
        data: applicationData.value.eChartsData.seriesData.oldApp,
      },
      {
        name: "新建应用",
        type: "bar",
        stack: "Ad",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#30DBE9",
              },
              {
                offset: 1,
                color: "#44F1B6",
              },
            ]),
            borderRadius: [9, 9, 0, 0],
          },
        },
        barWidth: 10,
        data: applicationData.value.eChartsData.seriesData.newApp,
      },
    ],
  });
};

const getBasicLibrary = async () => {
  try {
    const {
      data: { count: structured = 5 },
    } = await getStructuredDataStorage(); // 结构化
    const data1 = await GETdataResourceCount(); // 结构化
    console.log(data1,'1111111111111111111111111===========================55555555555555555555555555555555555555555555555555555555555555555');
    
    
    applicationData.value.num = data1.data.value;
    const {
      data: { count: dataItem = 323634 },
    } = await GETdigitalAssetsJcksjxCount(); // 基础库-数据项数
    const {
      data: { count: record = 8645 },
    } = await GETdigitalAssetsJcksjtCount(); // 基础库-数据条数
    const {
      data: { count: tableNum = 754 },
    } = await GETdigitalAssetsJckbCount(); // 基础库-表数量
    const {
      data: { count: enterpriseTypeNum = 754 },
    } = await GETdigitalAssetsJckqykqylbCount(); // 基础库-企业库-企业类别数
    const {
      data: { count: enterpriseNum = 754 },
    } = await GETdigitalAssetsJckqykqyzzCount(); // 基础库-企业库-企业资质数
    const {
      data: { count: enterpriseQualificationsNum = 754 },
    } = await GETdigitalAssetsJckqykqyCount(); // 基础库-企业库-企业数
    const {
      data: { count: peopleTypeNum = 754 },
    } = await GETdigitalAssetsJckrykryCount(); // 基础库-人员库-人员数
    const {
      data: { count: peopleNum = 754 },
    } = await GETdigitalAssetsJckrykrylbCount(); // 基础库-人员库-人员类别数
    const {
      data: { count: peopleRegisterNum = 754 },
    } = await GETdigitalAssetsJckrykzcryCount(); // 基础库-人员库-注册人员数
    const {
      data: { count: projectToolNum = 754 },
    } = await GETdigitalAssetsJckxmkzjxmdtCount(); // 基础库-项目库-在建建筑单体数
    const {
      data: { count: projectsOngoingNum = 754 },
    } = await GETdigitalAssetsJckxmkzjxmCount(); // 基础库-项目库-在建项目数
    const {
      data: { count: projectsBuildingsUnderConstruction = 754 },
    } = await GETdigitalAssetsJckxmkxmzCount(); // 基础库-项目库-项目总数
    const {
      data: { count: projectsInEachStage = 754 },
    } = await GETdigitalAssetsJckxmkgjdxmCount(); // 基础库-项目库-各阶段项目数
    const {
      data: { count: houseTypeNum = 754 },
    } = await GETdigitalAssetsJckfwkfwdCount(); // 基础库-房屋库-房屋栋数
    const {
      data: { count: houseToolNum = 754 },
    } = await GETdigitalAssetsJckfwkfwlbCount(); // 基础库-房屋库-房屋类别

    const data = {
      tableNum,
      record,
      dataItem,
      enterprise: {
        typeNum: enterpriseTypeNum,
        num: enterpriseNum,
        qualificationsNum: enterpriseQualificationsNum,
      },
      people: {
        typeNum: peopleTypeNum,
        num: peopleNum,
        registerNum: peopleRegisterNum,
      },
      project: {
        toolNum: projectToolNum,
        projectsOngoingNum: projectsOngoingNum,
        buildingsUnderConstruction: projectsBuildingsUnderConstruction,
        projectsInEachStage: projectsInEachStage,
      },
      house: {
        typeNum: houseTypeNum,
        toolNum: houseToolNum,
      },
    };
    applicationData.value.basicLibrary = data;
  } catch (error) {
    console.error("获取数字资产一本帐-应用&数据-基础库数据，接口错误！");
  }
};

/**
 * 获取专题库数据
 */
const getTopicLibraryData = async () => {
  try {
    const {
      data: { count: dataResources = 323634 },
    } = await GETdigitalAssetsZtkbCount(); // 专题库-表数量
    const {
      data: { count: dataItem = 8645 },
    } = await GETdigitalAssetsZtksjxCount(); // 专题库-数据项数
    const {
      data: { count: record = 754 },
    } = await GETdigitalAssetsZtksjtCount(); // 专题库-数据条数
    const {
      data: { count: designLibraryDataResources = 54 },
    } = await GETdigitalAssetsZtkkcsjksjxCount(); // 专题库-勘察设计库-数据项数
    const {
      data: { count: designLibraryDataItem = 734 },
    } = await GETdigitalAssetsZtkkcsjksjtCount(); // 专题库-勘察设计库-数据条数
    const {
      data: { count: designLibraryRecord = 754 },
    } = await GETdigitalAssetsZtkkcsjkbCount(); // 专题库-勘察设计库-表数量
    const {
      data: { count: projectQualityDataResources = 54 },
    } = await GETdigitalAssetsZtkgczlaqksjxCount(); // 专题库-工程质量安全库-数据项数
    const {
      data: { count: projectQualityDataItem = 54 },
    } = await GETdigitalAssetsZtkgczlaqksjtCount(); // 专题库-工程质量安全库-数据条数
    const {
      data: { count: projectQualityRecord = 54 },
    } = await GETdigitalAssetsZtkgczlaqkbCount(); // 专题库-工程质量安全库-表数量

    const {
      data: { count: moreDataResources = 54 },
    } = await GETdigitalAssetsZtkgdsjxCount(); // 专题库-更多-数据项数
    const {
      data: { count: moreDataItem = 54 },
    } = await GETdigitalAssetsZtkgdsjtCount(); // 专题库-更多-数据条数
    const {
      data: { count: moreRecord = 54 },
    } = await GETdigitalAssetsZtkgdbCount(); // 专题库-更多-表数量

    const data = {
      dataResources,
      dataItem,
      record,
      designLibrary: {
        num: 357, // TODO: 暂无接口，需后续提供
        dataResources: designLibraryDataResources,
        dataItem: designLibraryDataItem,
        record: designLibraryRecord,
      },
      projectQuality: {
        num: 357, // TODO: 暂无接口，需后续提供
        dataResources: projectQualityDataResources,
        dataItem: projectQualityDataItem,
        record: projectQualityRecord,
      },
      more: {
        num: 357, // TODO: 暂无接口，需后续提供
        dataResources: moreDataResources,
        dataItem: moreDataItem,
        record: moreRecord,
      },
    };
    applicationData.value.topicLibrary = data;
  } catch (error) {
    console.error("获取数字资产一本帐-应用&数据-专题库数据，接口错误！");
  }
};

onMounted(() => {
  initApplication();
  getBasicLibrary();
  getTopicLibraryData();
});
</script>
<style scoped langs="scss">
.applicationData {
  margin-top: 10px;
  display: flex;

  .applicationNumContainer {
    width: 336px;
    height: 231px;
    margin-right: 16px;
    background-image: url("../../img/quotaBackground.png");

    .title {
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 10%;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      padding: 10px;
    }

    .applicationNum {
      width: 300px;
      height: 160px;
      margin: auto;
    }
  }

  .basicLibrary {
    flex: 1;
    display: flex;

    .leftContainer {
      height: 231px;
      width: 115px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 4px;

      .storageCapacity {
        width: 100%;
        height: 112px;
        background-image: url("../../img/storageCapacity.png");
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12px;

        .ring {
          width: 56px;
          height: 56px;
          background-image: url("../../img/ring.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          justify-content: center;

          .num {
            font-family: Alimama ShuHeiTi;
            font-weight: 700;
            font-size: 20px;
            line-height: 100%;
            letter-spacing: 0%;
            vertical-align: bottom;
          }
        }

        .title {
          font-family: Alibaba PuHuiTi 2;
          font-weight: 600;
          font-size: 12px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;
          text-transform: uppercase;
        }
      }
    }

    .rightContainer {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .topContainer {
        width: 100%;
        height: 134px;
        background-image: url("../../img/basicLibraryBg.png");
        border-radius: 12px;

        .topContext {
          padding: 8px;

          .enterpriseContainer {
            display: flex;
            margin-top: 4px;

            .itemContainer {
              flex: 1;
              height: 44px;
              display: flex;

              .itemContent {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .item {
                  font-family: Alibaba PuHuiTi 2;
                  font-weight: 500;
                  font-size: 10px;
                  line-height: 100%;
                  letter-spacing: 0.53px;
                  height: 34px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;

                  .num {
                    font-family: DINPro;
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: 0px;
                    color: #37c9c9;
                  }
                }

                .cursor {
                  cursor: pointer;
                }
              }
            }
          }

          .splitLine {
            width: 100%;
            height: 1px;
            width: 100%;
            margin: 6px 0;
            box-shadow: 0px 0px 22.5px 0px #2ba7ff33 inset;
          }

          .projectContainer {
            display: flex;

            .projectContext {
              width: 345px;
              height: 44px;
              display: flex;
            }

            .itemContent {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-around;

              .item {
                font-family: Alibaba PuHuiTi 2;
                font-weight: 500;
                font-size: 10px;
                line-height: 100%;
                letter-spacing: 0.53px;
                height: 34px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .num {
                  font-family: DINPro;
                  font-weight: 700;
                  font-size: 16px;
                  line-height: 100%;
                  letter-spacing: 0px;
                  color: #37c9c9;
                }
              }
            }

            .houseStorage {
              flex: 1;
              height: 44px;
              display: flex;
            }
          }
        }
      }

      .tableTitle {
        display: flex;
        align-items: center;

        img {
          margin-right: 20px;
        }

        .numContext {
          font-family: Alimama ShuHeiTi;
          font-weight: 700;
          font-size: 10px;
          line-height: 100%;
          letter-spacing: 0.53px;
          text-align: center;
          margin-right: 16px;

          .num {
            font-family: DINPro;
            font-weight: 700;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0px;
            color: #37c9c9;
          }

          .unit {
            font-family: Alibaba PuHuiTi 2;
            font-weight: 500;
            font-size: 10px;
            line-height: 100%;
            letter-spacing: 0px;
            text-align: right;
            margin-left: 4px;
            color: #37c9c9;
          }
        }
      }

      .buttonContainer {
        width: 100%;
        height: 92px;
        border-radius: 10px;
        background-image: url("../../img/basicLibraryBg.png");

        .buttonContext {
          padding: 10px;
        }

        .topicLibrary {
          display: flex;
          margin-top: 8px;

          .topicItem {
            flex: 1;
            display: flex;

            .topicItemContext {
              flex: 1;
            }

            .topicTitle {
              font-family: Alimama ShuHeiTi;
              font-weight: 700;
              font-size: 10px;
              line-height: 100%;
              letter-spacing: 10%;
              text-transform: uppercase;
            }

            .num {
              font-family: DINPro;
              font-weight: 700;
              font-size: 12px;
              line-height: 100%;
              letter-spacing: 0px;
              color: #37c9c9;
            }

            .unit {
              font-family: Alibaba PuHuiTi 2;
              font-weight: 500;
              font-size: 10px;
              line-height: 100%;
              letter-spacing: 0px;
              text-align: right;
              margin-left: 4px;
              color: #37c9c9;
            }

            .splitLine {
              width: 1px;
              height: 50px;
              margin-right: 10px;
              box-shadow: 0px 0px 22.5px 0px #2ba7ff33 inset;
            }

            .topicContext {
              display: flex;
              margin-top: 8px;

              .item {
                flex: 1;

                .name {
                  font-family: Alibaba PuHuiTi 2;
                  font-weight: 500;
                  font-size: 10px;
                  line-height: 100%;
                  letter-spacing: 0.53px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
